<script setup lang="ts">
import { get, loadFile, message, post } from '@/utils'
import useModal from '@/hooks/useModal'
import ClassifyModal from './components/ClassifyModal.vue'
import { BtnPermission } from '@/enum/permission'
import useTable from '@/hooks/useTable'
import useTableLoadMore from '@/hooks/useTableLoadMore'
const { list, getList, loadMore } = useTableLoadMore<Classify>('/server-shop/admin/goods/category/lazy-list')
const { store } = useModal<Classify>()
const { formatColumns } = useTable()
const searchQuery = reactive({})
const formRef = ref()
const actionRef = ref()
const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = {
      ...params,
      size: params.pageSize,

      createTimeBegin: params.createTime ? params.createTime[0] + ' 00:00:00' : '',
      createTimeEnd: params.createTime ? params.createTime[1] + ' 23:59:59' : '',
    }
    Reflect.deleteProperty(query, 'pageSize')
    Reflect.deleteProperty(query, 'createTime')
    getList(query, status => {
      resolve({
        data: list.value,
        success: status,
        total: list.value.length,
      })
    })
  })
}

const columns = formatColumns([
  {
    title: 'ID',
    dataIndex: 'id',
    width: 210,
  },
  {
    title: '分类图片',
    dataIndex: 'icon',
    valueType: 'image',
    width: 120,
  },
  {
    title: '分类名称',
    dataIndex: 'name',
    width: 200,
    hideInSearch: false,
  },
  {
    title: '排序',
    dataIndex: 'sort',
    sorter: true,
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 100,
    hideInSearch: false,
    valueEnum: {
      0: { text: '关闭', status: 'Error' },
      1: { text: '开启', status: 'Success' },
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    valueType: 'dateRange',
    width: 200,
    hideInSearch: false,
  },
  {
    title: '操作',
    dataIndex: 'operations',
    width: 200,
    fixed: 'right',
    btnList: [
      {
        name: '编辑',
        permission: BtnPermission.编辑,
        handle: ({ record }) => store.handleShow(record),
      },
      {
        name: '删除',
        type: 'popconfirm',
        tip: '确认删除该数据?',
        permission: BtnPermission.删除,
        handle: ({ record }) => {
          post({ url: '/server-shop/admin/goods/category/remove?ids=' + record.id }, ({ code, msg }) => {
            if (code == 200) actionRef.value.reload()
            message({
              type: code == 200 ? 'success' : 'error',
              content: msg,
            })
          })
        },
      },
      {
        name: '新增子项',
        permission: BtnPermission.新建,
        disabled: ({ record }) => record.level != 1,
        handle: ({ record }) => {
          store.handleShow({ ...record, parentId: record.id, id: '' })
        },
      },
    ],
  },
])
</script>

<template>
  <div class="page">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" :scroll="{ x: 1000 }" :load-more="loadMore" column-resizable :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
        <a-button @click="store.handleShow({})" type="primary" v-permission="[BtnPermission.新建]">
          <template #icon>
            <icon-plus />
          </template>
          新建</a-button
        >
      </template>
    </ProTable>
    <ClassifyModal v-if="store.show" v-model:show="store.show" :id="store.id" :parent-id="store.info.parentId" @confirm="actionRef.reload" :edit="store.edit" />
  </div>
</template>
